<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css" type="text/css">


    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/font-awesome.css?v=4.4.0" type="text/css">


    <style>


        .toolbar {
            border: 1px solid #ccc;
            width: 80%;
        }
        .text {
            border: 1px solid #ccc;
            height: 800px;
            width: 80%;
        }


        .image {
            margin: 0px 20px;
            height: 330px;
        }


        * {
            box-sizing: border-box;
        }

        body {
            background: #f4f4f4;
        }

        span {
            font-size: 12px;
        }

        p {
            margin: 5px 0;
        }

        .textWrap {
            margin: 10px 0 20px;
        }

        .textWrap input,
        .textWrap textarea {
            display: inline-block;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #ddd;
            height: 34px;
            width: 100%;
            padding: 7px 12px;
            padding-right: 80px;
            line-height: 20px;
            font-size: 14px;
            color: #333;
        }

        .textWrap textarea {
            height: 80px;
        }
    </style>



</head>

<body>
   <%@include file="../common/nav_top.jsp"%>
    <!-- 标题 title -->
   <div>
       <h2 style="margin-left: 25%;margin-top: 50px">游记须知</h2>
       <!-- <hr style="margin-top: 0px;background-color: gray;height: 1px;margin-left: 20%;width: 70%"> -->
       <div class="alert alert-success" style="margin-left: 25%;width: 41%">
           <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
               &times;
           </button>
           发布游记说明,请您仔细阅读<br>
           1.为了净化悠U的环境,我们提供游记敏感词检测,您在发布之前需要点击&nbsp;<span class="glyphicon glyphicon-hand-right"></span>&nbsp;检测<br>
           2.如您发布的是真实的旅行分享,可以马上点击&nbsp;<span class="glyphicon glyphicon-hand-right"></span>&nbsp;发表<br>
           3.如有敏感词,请您改正之后继续发布<br>
           4.好啦，就说这么多，希望大家发帖愉快！~
       </div>
   </div>
   <!-- 注意 end -->
   <!-- 作者id -->

   <input type="hidden" value="${noteAuthor.id}" id="autuorId">
   <%--发表文章类型--%>
   <input type="hidden" value="${noteAuthor.flag}" id="noteType">
   <!-- 作者id  end -->
   <!-- 标题 begin -->
   <div class="form-group" style="margin-left: 22%;overflow: hidden">
        <span class="col-md-1 control-label"
              style="color: grey;font-size: 18px;padding-right:0px;padding-top: 20px;text-align: right">标题</span>
       <div class="col-md-6" style="margin-right: 350px">
           <div class="textWrap wordSumTotal" id="title_text">
               <input type="text" id="title" name="title" value="${notes.title}" style="height:46px;" maxlength="30"
                      placeholder="最多可输入30个字">
           </div>
       </div>
       <span class="col-md-1 control-label"
             style="color: grey;font-size: 18px;padding-right:0px;padding-top: 20px;text-align: right;clear: both">封面</span>
       <div class="col-md-9 image">
           <form method="post" enctype="multipart/form-data" id="imgform" style="margin-top: 5px">
               <input type="file" name="myfile" id="myfile">
           </form>
           <!-- 图片放置位置 -->
           <div id="preview" style="width:  400px;height:300px;border:2px solid white">
               <input type="hidden" id="photoFlag" value="false">

           </div>
       </div>
   </div>
   <!-- 标题 end -->
   <div>

       <!--第1个 富文本 begin -->
       <div class="container-fluid" style="margin-bottom: 20px;margin-left: 25%">
           <div class="row">
               <div id="div1" class="toolbar">
               </div>
               <div id="div2" class="text">
                   <p>请输入内容</p>
               </div>
           </div>
       </div>
       <!-- 第一个富文本 end -->

       <div class="container" style="margin-bottom: 20px">
           <div class="row">
               <div class="col-md-4">
               </div>
               <div style="margin-top: 50px;margin-bottom: 50px" class="col-md-6">
                   <button type="submit" class="btn btn-w-m btn-warning" id="article"
                           onclick="saveNotes()" disabled>
                       发表</button>
                   <button type="submit" onclick="upload()" class="btn btn-warning" id="checkword" style="margin-left: 300px">体检</button>
               </div>
           </div>
       </div>
   </div>

    <!-- 主体end -->
   <%@include file="../common/nav_bottom.jsp"%>

    <!--引入bootstrap的js文件-->
    <script src="${path}/plugins/jquery/jquery.min.js"></script>

    <script src="${path}/plugins/bootstrap/js/bootstrap.js"></script>

   <!-- 引用js -->
   <script type="text/javascript" src="${path}/js/edit/wangEditor.min.js"></script>
   <script type="text/javascript" src="${path}/js/edit/textSum.min.js"></script>

   <%--七牛云--%>

   <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
   <script src=" https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.js"></script>
   <script type="text/javascript" src="${path}/js/edit/ajaxfileupload.js"></script>

    <script type="text/javascript" language="JavaScript">


        var E = window.wangEditor

        var editor1 = new E('#div1', '#div2')  // 两个参数也可以传入 elem 对象，class 选择器

        //editor.customConfig.uploadImgServer = '/upload' // 配置服务器端地址 upload是服务器接口
        // 允许上传到七牛云存储
//        editor.customConfig.qiniu = true
        editor1.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片

        editor1.create()

        //上传封面
        $('#myfile').change( function() {
            $("#imgform").ajaxSubmit({
                url: "${path}/upload",
                method: 'POST',
                datType: 'json',
                success: function (data) {
                    console.log(data.imgUrl);
                    console.log(typeof data.imgUrl);
                    var ele = "<img src=\"\" style='max-width: 400px;max-height: 300px' id='photo'/>"
                    $("#preview").append(ele);//编程一个jquery的对象
                    $("#preview").find("img").attr("src",data.imgUrl);//调用jquery的方法找到
//                        图片的标签的名称，再设置里面的src的属性的值

                },
                error: function (data) {
                    alert(data);
                }
            })
        })
        //上传头图结束



        $(function () {
            $('#title_text').textSum();
        });
        function upload() {
            //处理富文本编辑器的数据
            var picArr = new Array();
            var editorData = editor1.txt.html();
            //处理Word复制过来的样式
            // editorData = cleanPastedHTML(editorData);
            var wordArr = new Array();
            //获取图片后面紧跟的文字，由于紧跟在图片后面，所以通过p标签获取文字的正则获取不到。
            p = /">(.*?)<br>/ig;
            while (true) {
                var match = p.exec(editorData);
                if (match) {
                    if (match[1] != '') {
                        wordArr.push(match[1]);
                    }
                } else {
                    break;
                }
            }
            //获取标题内容，因为Word中的标题，在富文本编辑器中获取出来都带<h1></h1>或<h2></h2>等
            p = /<h\d>(.*?)<\/h\d>/ig;
            while (true) {
                var match = p.exec(editorData);
                if (match) {
                    //判断是否全是空格
                    if (!match[1].match(/^[ ]*$/)) {
                        wordArr.push(match[1]);
                    }
                } else {
                    break;
                }
            }
            //获取p标签中的文字
            p = /<p>([^<]*?)<\/p>/ig;
            while (true) {
                var match = p.exec(editorData);
                if (match) {
                    //判断是否全是空格
                    if (!match[1].match(/^[ ]*$/)) {
                        wordArr.push(match[1]);
                    }
                } else {
                    break;
                }
            }
//            alert(wordArr.toString());
            $.post('${path}/checkword', {
                // data: editor1.txt.html()
                checktext:wordArr.toString(),
            }, function (data) {
                if(data.flag){
                    alert("检测成功,请发表游记")
                    console.log(data);
                    document.getElementById("article").disabled = false;

                }else{
                    alert("检测到您的游记有违规词汇,请修改")
                    console.log(data);
                    // text就是文本  html带标签
                    //字体高亮
                    var content = document.getElementById("div2");
                    contents = content.innerHTML;
                    var values = contents.split(data.data);
                    content.innerHTML = values.join('<span style="background:red;">' + data.data + '</span>');
                }
            });
        }

        //拿到传上去的图片路径
        function test() {
            var res=document.getElementById("photo").src;
            console.log("分割线");
            console.log(res);

        }
        //发送请求保存文章
       function saveNotes() {
            var autuor_id = document.getElementById("autuorId").value
           var note_type = document.getElementById("noteType").value
           var title = document.getElementById("title").value
           var photo=document.getElementById("photo").src;

           $.post('${path}/savenotes', {
               // data: editor1.txt.html()
               autuor_id:autuor_id,
               title:title,
               note_type:note_type,
               photo:photo,
               content:editor1.txt.html()
           }, function (data) {
               if(data.flag){
                   console.log(data);
                   window.location='${path}/success';
               }else{
                   console.log(data);
               }
           });
        }



    </script>

</body>

</html>